<div class="breadcrumbs breadcrumbs-fixed ace-save-state" id="breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-users home-icon"></i>
            <a href="#">用户管理</a>
        </li>
        <li class="active">用户反馈</li>
    </ul>
</div>

<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <h4 class="header smaller lighter blue">用户反馈列表</h4>
            <div class="row">
                <div class="col-xs-9">
                    <button id="batch_remove" class="btn btn-xs btn-danger" type="button">
                        <i class="ace-icon fa fa-trash bigger-130"></i> 批量删除
                    </button>
                </div>
                <div class="col-xs-3">
                    <form class="form-horizontal">
                        <div class="input-group">
                            <input class="form-control col-sm-4 input-sm" id="account" type="text" placeholder="用户账号"/>
                            <span class="input-group-btn">
                        <button class="btn btn-xs btn-info" id="search-btn" type="button">
                            <i class="ace-icon fa fa-search"></i> 搜索
                            </button>
					</span>
                        </div>
                    </form>
                </div>
            </div>
            <div class="space-6"></div>
            <div class="dataTables_wrapper form-inline no-footer">
                <table id="feddback-table" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th class="center">
                            <label class="pos-rel">
                                <input type="checkbox" class="ace">
                                <span class="lbl"></span>
                            </label>
                        </th>
                        <th>用户账号</th>
                        <th>联系方式</th>
                        <th>反馈内容</th>
                        <th>反馈时间</th>
                        <th>状态</th>
                        <th>回复内容</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var feedbackTable;
        $(function () {
            feedbackTable = $('#feddback-table').DataTable({
                language: {url: 'ace/json/dataTable_CN.json'},
                autoWidth: false,
                ordering: false,
                searching: false,
                serverSide: true,
                processing: true,
                deferRender: true,
                responsive: true,
                ajax: {
                    url: 'management/feedbackList'
                },
                columns: [{
                    data: function (row) {
                        return '<div class="center"><label class="pos-rel"><input type="checkbox" name="bathBox" data-id="' + row.id + '" class="ace"><span class="lbl"></span></label></div>';
                    }
                }, {
                    data: 'userAccount'
                }, {
                    data: 'contact'
                }, {
                    data: 'content',
                    defaultContent: ''
                }, {
                    data: 'createTime'

                }, {
                    data: function (row) {
                        var label;
                        if (row.status) {
                            label = "<span class='label label-xs label-success arrowed-right'>已处理</span>"
                        } else {
                            label = "<span class='label label-xs label-warning arrowed-in-right'>未处理</span>";
                        }
                        return label;
                    }
                }, {
                    data: 'reply',
                    defaultContent: ''
                }, {
                    data: function (row) {
                        var param = {};
                        param.id = row.id;

                        var replyBtn = "<a id='reply' data-id='" + row.id + "' data-content='" + row.content + "' href='javascript:;' role='button' class='btn btn-xs btn-primary'><i class='fa fa-reply'></i> 回复</a>";
                        var delBtn = "<a id='del' data-id='" + row.id + "' href='javascript:;' role='button' class='btn btn-xs btn-danger'><i class='fa fa-trash'></i> 删除</a>";
                        return row.status ? delBtn : replyBtn + "&nbsp;&nbsp;" + delBtn;
                    }
                }]
            });

            $("#feddback-table tbody").on('click', "a#reply", function () {
                promptReply($(this).data("id"), $(this).data("content"));
            });

            $("#feddback-table tbody").on('click', "a#del", function () {
                confirmRm($(this).data("id"));
            });

            $("#search-btn").click(function () {
                var account = $('#account').val();
                feedbackTable.ajax.url("feedbackList?account=" + account).load();
            });

            //select/deselect all rows according to table header checkbox
            $('#feddback-table').find('> thead > tr > th input[type=checkbox]').eq(0).on('click', function () {
                $('#feddback-table').find('tbody > tr').find('input:checkbox').prop("checked", this.checked);
            });

            $('#batch_remove').click(function () {
                var ids = [];
                $('#feddback-table').find('tbody > tr').find('input:checkbox').each(function (i) {
                    if (this.checked) {
                        ids[i] = $(this).data("id");
                    }
                });
                if (ids.length > 0) {
                    confirmRm(ids);
                }
            });
        });

        function promptReply(id, content) {
            var prompt = bootbox.prompt({
                title: "回复：" + content,
                backdrop: true,
                inputType: 'textarea',
                buttons: {
                    confirm: {
                        label: '<i class="fa fa-check"></i> 确认',
                        className: 'btn-primary'
                    },
                    cancel: {
                        label: '取消',
                        className: 'btn-default'
                    }
                },
                callback: function (res) {
                    if (res === null) {
                        prompt.modal('hide');
                    } else {
                        $.post("management/replyFeedback", {id: id, reply: res}, function () {
                            prompt.modal('hide');
                            feedbackTable.ajax.reload();
                        });
                    }
                }
            });
        }

        function confirmRm(id) {
            bootbox.confirm({
                title: "<i class='fa fa-warning'></i> 警告",
                message: "确定要这么做？",
                backdrop: true,
                buttons: {
                    confirm: {
                        label: '<i class="fa fa-check"></i> 确认',
                        className: 'btn btn-xs btn-danger'
                    },
                    cancel: {
                        label: '<i class="fa fa-undo"></i> 取消',
                        className: 'btn btn-xs btn-default'
                    }
                },
                callback: function (res) {
                    if (res) {
                        $.post("management/removeFeedback/" + id, function (data) {
                            if (data) {
                                if($.isArray(id)){
                                    $('#feddback-table').find('> thead > tr > th input[type=checkbox]').prop("checked", false);
                                }
                                feedbackTable.ajax.reload();
                            }
                        });
                    }
                }
            });
        }
    </script>
</div>